<script setup lang="ts">
import Arithmetic from '@/views/Demand/components/arithmetic.vue';
import { doCheckPurchasePlan } from '@/api/demand/arithmetic/index';

const props = defineProps<{
    selectId: (string | number)[];
}>();

const emit = defineEmits(['getData', 'updateSelect']);

const visible = ref(false);

const checkbox = ref(false);

/**
 * @: 打开弹框
 */
const errMsg = ref('');
const open = async () => {
    try {
        const { data } = await doCheckPurchasePlan({ orderNumbers: props.selectId.join(',') });
        errMsg.value = data ?? '';
        visible.value = true;
    } catch (error) {
        console.log(error);
    }
};

/**
 * @: 打开计划运算进度条
 */
const arithmeticRef = ref<InstanceType<typeof Arithmetic>>();
const openArithmetic = () => {
    visible.value = false;
    arithmeticRef.value?.open('CANCEL_OPERATION', { synDeleteOrder: checkbox.value });
};

defineExpose({ open });
</script>

<template>
    <q-modal
        v-model:visible="visible"
        class="m-modal-confirm"
        title=""
        :footer="false"
        width="480px"
    >
        <div>
            <div>
                <span class="m-modal-confirm__icon"
                    ><q-icon icon-class="warning" size="20px"
                /></span>
                <span class="m-modal-confirm__title"> 取消排产！ </span>
            </div>

            <div class="body">
                取消排产后，所选已排产的订单将会取消排程，同时剩余已排产订单会统一重新排程，并且不可撤销，请确认操作！

                <div v-if="errMsg" class="body__error">
                    <p>以下订单已生成采购计划，请确认没有进行采购后再取消排产！</p>
                    <p>订单号：{{ errMsg }}</p>
                </div>
                <div class="body__select">
                    <el-checkbox v-model="checkbox" label="同步删除取消排产的订单" />
                </div>
            </div>

            <div class="footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="openArithmetic">确认取消排产</el-button>
            </div>
        </div>
    </q-modal>

    <!-- 计划运算 -->
    <arithmetic
        ref="arithmeticRef"
        :ids="selectId"
        @get-data="emit('getData')"
        @update-select="ids => emit('updateSelect', ids)"
    />
</template>

<style scoped lang="scss">
@include b(m-modal-confirm) {
    @include e(icon) {
        float: left;
        margin-top: 1px;
        margin-right: 12px;
        line-height: 0;
    }

    @include e(title) {
        display: block;
        overflow: hidden;
        font-size: 16px;
        line-height: 24px;
        color: var(--q-text-color-regular);
    }
}

@include b(body) {
    margin-top: 12px;
    margin-left: 34px;
    font-size: 14px;
    line-height: 24px;
    color: var(--q-text-color-secondary);
    @include e(select) {
        margin-top: 6px;

        :deep(.el-checkbox__label) {
            color: var(--q-color-primary);
        }
    }
    @include e(error) {
        margin-top: 6px;
        color: var(--q-color-danger);
    }
}

@include b(footer) {
    margin-top: 30px;
    text-align: right;
}
</style>
